<template>
  <div>
    <Modal
      :title="L('CreateNewRole')"
      :value="value"
      @on-ok="save"
      @on-visible-change="visibleChange"
    >
      <Form ref="roleForm" label-position="right" :label-width="90" :rules="roleRule" :model="role">
        <FormItem :label="L('RoleName')" prop="name">
          <Input v-model="role.name" :maxlength="32" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('DisplayName')" prop="displayName">
          <Input v-model="role.displayName" :maxlength="32" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('Description')" prop="description">
          <Input v-model="role.description" :maxlength="1024"></Input>
        </FormItem>
        <!-- <Tabs value="detail">
          <TabPane :label="L('RoleDetails')" name="detail">
            
          </TabPane>
          <TabPane :label="L('RolePermission')" name="permission">
            <CheckboxGroup v-model="role.grantedPermissions">
              <Checkbox
                :label="permission.name"
                class="check-role"
                v-for="permission in permissions"
                :key="permission.name"
              >
                <span>{{permission.displayName}}</span>
              </Checkbox>
            </CheckboxGroup>
          </TabPane>
        </Tabs>-->
      </Form>
      <div slot="footer">
        <Button @click="cancel">{{L('Cancel')}}</Button>
        <Button @click="save" type="primary">{{L('OK')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../../lib/util";
import AbpBase from "../../../lib/abpbase";
import Role from "@/store/entities/role";
@Component
export default class CreateRole extends AbpBase {
  @Prop({ type: Boolean, default: false }) value: boolean;
  role: Role = new Role();
  get permissions() {
    return this.$store.state.role.permissions;
  }
  save() {
    (this.$refs.roleForm as any).validate(async (valid: boolean) => {
      if (valid) {
        if (!this.role.grantedPermissions) {
          this.role.grantedPermissions = [];
        }
        await this.$store.dispatch({
          type: "role/create",
          data: this.role
        });
        (this.$refs.roleForm as any).resetFields();
        this.$emit("save-success");
        this.$emit("input", false);
        this.$Notice.success({
          title: "成功",
          desc: "添加成功."
        });
      }
    });
  }
  cancel() {
    (this.$refs.roleForm as any).resetFields();
    this.$emit("input", false);
  }
  visibleChange(value: boolean) {
    if (!value) {
      this.$emit("input", value);
    }
  }
  roleRule = {
    name: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("RoleName")),
        trigger: "blur"
      }
    ],
    displayName: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("DisplayName")),
        trigger: "blur"
      }
    ]
  };
}
</script>

